coffeekraken-sugar

Sugar

Sugar gives you a lot of cool stuff to enhance your codebase. It basically does nothing by default but let you grab what you want from it. It can be the colors management feature, as well as the spaces management, helper classes, etc...

We like to think about this toolkit as

A little (but powerful) sugar in your codebase

Table of content

1. Goals
2. Install
3. Quick start
4. Sass features
5. JS features
6. What sugar does not
7. Other tools integration
8. Some components demos
9. Contribute
10. Browsers support
11. License
12. Who are Coffeekraken

Goals

The primary goal of this toolkit is to cover these needs:

1. Give you a way to organize your codebase (colors, fonts, etc...)
   • Sugar does not tells you how your folders need to be layed out
   • Help you to stay organized inside your code
     • Colors
     • Fonts
     • Etc...
   • Help a lot when you need to work in team
2. Give you access to a large number of useful mixins like:
   • s-font : Apply font property quickly
   • s-clearfix : Apply any clearfix (standard, overflow, float, etc...) type quickly
   • s-placeholder : Apply the input placeholder styling
   • s-list-bullet : Create fully customized list bullets (icons, images, decimal, etc...)
   • s-vertical-rhythme : Set your vertical rhythme rules
   • s-truncate-text : Truncate a text when to wide
   • And many many more...
3. Give you access to some cool effects that you can tweak like:
   • s-depth : Material design depth shadows
   • s-bubble : Customizable speach bubbles
   • s-side-lined : Simple side lines to apply on titles or whatever
   • s-long-shadow : Create a nice long shadow effect
   • Fully customizable one div loaders
   • And many more...
4. Provide some useful daily use javascript functions like:
   • closest : Equivalent of the jQuery closest functions
   • whenInViewport : Let you know when an element enter the viewport the first time
   • whenAttribute : Let you know when an element has a specifiy attribute (or that an attribute is a string, etc...)
   • scrollTo : Animate the scroll to a certain element in the page
   • domReady : Equivalent to the jQuery ready function
   • getAnimationProperties : Return an object with the css animations properties
   • And many, many, many more...
5. Provide some powerful javascript classes like:
   • SWebComponent : Base class to create webcomponent based on react methods naming (componentWillMount, componentMount, etc...)
   • SBinder : Allows you to bind object properties to another object
   • SWatcher : Allows you to monitor object properties
   • STimer : Nice little class to handle timers (start, stop, pause, onTick, etc...)
   • And many more...
6. Plenty web components based on the SWebComponent class
   • These web components are separated into outside repositories
   • Official sugar web components are published on the Coffeekraken github organisation
   • Well tested components
   • Open source so don't be afraid to contribute!

Install

npm install coffeekraken-sugar --save

Release the kraken !!! 🦑

Quick start

Here's how to get started quickly:

SASS (scss)

// import sugar
@import 'node_modules/coffeekraken-sugar/index';

// configure your sugar
@include s-setup((
	// configuration here...
));

// init (required to be just after s-setup calls)
@include s-init();

// generate the classes if you want
@include s-classes();

JS

In javascript, you just need to import what you want from the toolkit like so:

import STimer from 'coffeekraken-sugar/js/classes/STimer';
// etc...

Sass features

Here's a list of features that the toolkit will offer you. Don't worry, it seems like a lot, but you don't need to use all of them to start. Just pick what you need and let the rest aside...

• Colors : Manage, organize and use colors easily
  • Named colors
  • Easy modifiers
  • Helper classes (optional)
  • And more...
• Fonts : Keep your fonts really organized
  • Names fonts
  • Helper mixins
  • Helper classes (optional)
  • And more...
• Typography : Full stack typography management
  • Helper mixins
  • Helper classes (optional) (lowercase, uppercase, aligns, etc...)
  • And more...
• Sizes : Manage sizes ratios to keep consistent margins, etc...
  • Named sizes (smaller, small, default, etc...)
  • Fully customizable
  • Ratio based
  • And more...
• Spaces : Full stack spaces management
  • Named spaces (share sizes names)
  • Helper classes (optional)
    • .m-b-small : Margin bottom small
    • .m-t-big : Margin top big
    • .p-l : Padding left (default)
    • Etc...
  • Helper mixins
  • And more...
• Look and feel : Handle how your components (atoms) looks across your site
  • em unit based
  • Helper mixins
  • Ensure a consistent feel across your website
  • And more...
• Filters : Manage and keep your filters organized
  • Named filters
  • Helper mixins
  • Helper classes (optional)
  • And more...
• Transitions : Manage and keep your transitions organized
  • Named transitions
  • Helper mixins
  • Helper classes (optional)
  • And more...
• And many more cool stuffs like:
  • A bunch of cool mixins to discover
  • Utils functions like :
    • s-convert : Convert from a unit to another
    • s-is : Easily advanced variables type checking
    • And more...
  • We let you discover the rest by yourself...

JS features

Sugar provide a lot of cool functions and classes that you can use inside your project. The main goal sugar try to achieve is to give you some cool tools that you can or not use. It's your choice and sugar will never force you in any way.

All the javascript capabilities of sugar are well structured and splited inside the repository so you will be able to grab only what you want from it. Here's some examples of functions and classes you might load in your project:

import whenAttribute from 'coffeekraken-sugar/js/dom/whenAttribute'
import closest from 'coffeekraken-sugar/js/dom/closest'
import whenInViewport from 'coffeekraken-sugar/js/dom/whenInViewport'
import whenAttribute from 'coffeekraken-sugar/js/dom/whenAttribute'
import closestNotVisible from 'coffeekraken-sugar/js/dom/closestNotVisible'
import SColor from 'coffeekraken-sugar/js/classes/SColor'
import STimer from 'coffeekraken-sugar/js/classes/STimer'
import SWebComponent from 'coffeekraken-sugar/js/core/SWebComponent'
// etc...

• Classes : Set of useful classes like:
  • STimer : Handle times with nice control like start, stop, pause, etc...
  • SColor : Manipulate colors and access your sass registered colors
  • And more...
• DOM Helpers : Set of useful DOM related functions like:
  • closest : Equivalent of the jQuery closest functions
  • whenInViewport : Let you know when an element enter the viewport the first time
  • whenAttribute : Let you know when an element has a specifiy attribute (or that an attribute is a string, etc...)
  • scrollTo : Animate the scroll to a certain element in the page
  • And more
• Easings : Set of easings functions
• Filters : Cool js filters like:
  • SGooeySvgFilter : Make a gooey effect like in this demo
  • SGradientSvgFilter : Apply an SVG gradient filter on top of any HTMLElement
  • SMotionblurSvgFilter : Monitor an HTMLElement movement and apply a nice motion blur accordingly
• Features : Additional auto-applied DOM behaviors
• Utils : Utils function for strings, colors, objects, etc... like:
  • throttle : Throttle a function call
  • isColor : Check if is a valid color
  • isEmail : Check if is a valid email
  • whenProperty : Be notified when a property exist or match a certain check function
  • And more...
• Web Components : Powerful web components library like:
  • s-read-more : Simply create toggleable read more component
  • s-datepicker-component : Clean and fully featured datepicker
  • s-ripple-component : Fully customizable ripple component
  • s-share-component : Create customizable sharing buttons with ease
  • s-drawer-component : Elegant and powefull component to create fully customizable components.
  • And many more...

Other tools integration

Sugar is also focused on being a good friend with other tools. Here's some tools that you can use with:

1. Carpenter : Styleguide and documentation aggregator interface for your projects
   • Generate styleguide from your css codebase
   • Aggregate documentations from used modules inside 1 interface
   • Freaking cool to work in team
   • And more...
2. Docblock parser : Parse docblocks to JSON
   • Sugar is all documented with clean docblocks inside source files
3. Webpack : Build final package JS file from ES6 modules codebase
4. Let us know if you have other cool ideas around some Sugar integrations...

What Sugar does not

Sugar has some goals it try to achieve, and have also some things that it does intentionally not like:

1. Vendor prefixing your CSS
   • They are plenty of tools to make that like autoprefixer
2. Implement polyfills like webcomponent.js, etc...
   • You will need to integrate them yourself when you need to...
3. Force you to use his features
   • Grab what you want from the toolkit, keep the rest aside...

Contribute

Sugar is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

1. Share the love ❤️
2. Declare issues
3. Fix issues
4. Add features
5. Build web component

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE11+	last 2 versions	last 2 versions	last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are